<template>
  <div class="partner-container">
    <h1 class="header">
      合作伙伴
    </h1>

    <div class="content-wrap">
      <div
        class="content-item"
        v-for="(item, idx) in partners"
        :key="idx"
      >
        <div class="content-header">
          <span class="name">{{ item.name }}</span>
          <img :src="item.logo" />          
        </div>

        <div class="content-desc">
          {{ item.desc }}
        </div>

        <div class="slogan">
          {{ item.slogon }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const partners = ref([
  {
    name: '北京优锘科技有限公司',
    logo: 'https://p1.mingdaoyun.cn/fe288386-3d26-4eab-b5d2-51eeab82a7f9/94f0bd43-0d05-41e7-a6d4-7f0e118360c8/5fa25c0061db6300010d8a04/20231122/2p4Od6c8dM46dpawfLce8sdY3ndWe9bQ4w6J6m5kcW7x9gcn66e67S7LbFbN9Sa3.png?imageView2/2/w/1280/h/800',
    desc: 'IT智能管理和IoT物联网可视化管理领域的专业厂商',
    slogon: '#互联网与IT软件 #北京'
  },

  {
    name: '苏州鹿山信息科技有限公司',
    logo: 'https://pic.mingdao.com/pic/202012/23/FcWmOXbOrNqrBzg_972473743.png?imageView2/2/w/1280/h/800',
    desc: '专注于企业数字化管理创新所需的应用流程设计和实施落地培训服务。',
    slogon: '#互联网与IT软件 #北京'
  },

  {
    name: '嘉兴付立叶智能科技有限公司',
    logo: '	https://pic.mingdao.com/pic/202012/28/EEvttnUOEywZgXo_1268644027.png?imageView2/2/w/1280/h/800',
    desc: '专门打造制造业数字化管理的解决方案。',
    slogon: '#互联网与IT软件 #北京'
  },

  {
    name: '柳州知行远企业管理咨询有限公司',
    logo: 'https://pic.mingdao.com/pic/202107/15/BjkXiyCUjqsMUNT_1132954631.jpg?imageView2/2/w/1280/h/800',
    desc: '专注为客户提供数字化转型方案。',
    slogon: '#互联网与IT软件 #北京'
  },

  {
    name: '杭州联核科技有限公司',
    logo: 'https://pic.mingdao.com/pic/202107/14/eXwxapsAcdFVVcg_79240430.jpg?imageView2/2/w/1280/h/800',
    desc: '致力于为客户提供一流的无人叉车解决方案和使用体验。',
    slogon: '#互联网与IT软件 #北京'
  },

  {
    name: '东方君行（北京）科技有限公司',
    logo: 'https://p1.mingdaoyun.cn/pic/20230105/2Qan9H5R4w2pfwdJ1QegaM3C1Yd71m1zcwal4h690D4e5ac03R4PeI8jax5C8Tci.jpg?imageView2/2/w/1280/h/800',
    desc: '公司一直致力于提供低代码、零代码、高代码的多种应用开发模式，帮助企业量身定制全链路数字业务协同系统。',
    slogon: '#互联网与IT软件 #北京'
  },

]);
</script>

<style lang="scss" scoped>
.partner-container{
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
  border: 1px solid#e4e7ed;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 40px;
  .header{
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
  }

  .content-wrap{
    display: flex;
    flex-wrap: wrap;
    .content-item{
      width: 32%;
      height: 210px;
      padding: 0 20px;
      border: 1px solid #e4e7ed;
      cursor: pointer;
      margin-bottom: 12px;
      margin-right: 12px;

      &:hover{
        box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.2);

        .slogan{
          color: #219dF3;
        }
      }
      .content-header{
        width: 100%;
        height: 60px;
        line-height: 60px;
        display: flex;
        justify-content: space-between;

        .name{
          font-size: 20px;
          font-weight: 600;
        }
      }

      .content-desc{
        margin-top: 12px;
      }

      .slogan{
        margin-top: 60px;
        color: #9e9e9e;
        font-size: 13px;
      }
    }
  }
}
</style>